<template>
  <el-row :gutter="40">

    <el-col :span="7">
      <el-link disabled>用户列表</el-link>
      <el-table :data="users" style="width: 100%" :show-header="false" @row-click="setUser">
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
      </el-table>
    </el-col>

    <el-col :span="7">
      <el-link disabled>应用列表</el-link>
      <el-table :data="apps" style="width: 100%" :show-header="false" @row-click="setApp">
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
      </el-table>
    </el-col>

    <el-col :span="7">
      <el-link disabled>角色树 ({{selectUser.name?selectUser.name:'未选择'}}<-->{{selectApp.name?selectApp.name:'未选择'}})
      </el-link>
      <el-tree
        :data="roles"
        :props="rolesProps"
        node-key="id"
        :default-expand-all="true"
        :check-strictly="true"
        ref="userRoleTree"
        :default-checked-keys="userRoleIds"
        show-checkbox>
      </el-tree>

      <el-button type="primary" size="mini" round @click="updateUserRole">更新用户角色</el-button>

    </el-col>
  </el-row>


</template>
<script>

  export default {
    name: "UserRole",
    mounted() {
      this.getUser();
      this.getApp();
    },
    data() {
      return {
        users: [],
        apps: [],
        selectUser: {},
        selectApp: {},
        roles: [],
        userRoleIds: [],
        rolesProps: {
          label: 'name',
        },
      }
    },
    methods: {
      setUser(user) {
        this.userRoleIds = []
        this.selectUser = user;
        this.getRole();
      },

      setApp(app) {
        this.userRoleIds = []
        this.selectApp = app;
        this.getRole();
      },

      getRole() {
        if (this.selectUser.id && this.selectApp.id) {
          this.getAppRole();
          this.getUserRole();
        }
      },
      getAppRole() {
        this.$http.get("/back/roles?appId=" + this.selectApp.id).then((data) => {
          this.roles = data;
        }).catch(error => {
          console.error(error)
        });
      },
      getUserRole() {
        this.$http.get("/back/userRoles?userId=" + this.selectUser.id + "&appId=" + this.selectApp.id).then((data) => {
          this.userRoleIds = data;
        }).catch(error => {
          console.error(error)
        });
      }
      ,
      getUser() {
        this.$http.get("/back/users").then((data) => {
          this.users = data;
        }).catch(error => {
          console.error(error)
        });
      },
      getApp() {
        this.$http.get("/back/apps").then((data) => {
          this.apps = data;
        }).catch(error => {
          console.error(error)
        });
      },
      updateUserRole() {
        if (this.selectApp.id && this.selectUser.id) {
          let roles = new Set();
          this.$refs.userRoleTree.getCheckedNodes().forEach(data => {
            roles.add(data.id);
          })
          if (roles.length == 0) {
            this.$message.info("未选择角色，无法提交！")
            return
          }
          this.$http.post("/back/userRole", {
            appId: this.selectApp.id,
            userId: this.selectUser.id,
            roleIds: roles
          }).then((data) => {
            this.userRoleIds = data;
            this.$message.info("用户与角色关系修改成功")
          }).catch(error => {
            this.$message.error("用户与角色关系修改异常！")
          });
        } else {
          this.$message.error("应用或者角色选择错误！")
        }

      }

    },
  }
</script>
